<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <style>

        /*.tab-menus {*/
        /*    margin: auto;*/
        /*    border: 1px solid #009fe9;*/
        /*}*/

        /*.tab-menus ul {*/
        /*    height: 42px;*/
        /*    width: 100%;*/
        /*    position: relative;*/
        /*    float: left;*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    min-width: 150px;*/
        /*    overflow: hidden;*/
        /*}*/

        /*.tab-menus ul.tab-menu-bg {*/
        /*    z-index: -1;*/
        /*    background-color: #009fe977;*/
        /*}*/

        /*.tab-menus ul.tab-menu-ul {*/
        /*    top: -42px*/
        /*}*/

        /*.tab-menus li {*/
        /*    list-style: none;*/
        /*    width: 140px;*/
        /*    padding: 0 5px;*/
        /*    float: left;*/
        /*    height: inherit;*/
        /*}*/

        /*.tab-menus .tab-menu-ul > li {*/
        /*    min-width: 100px;*/
        /*    white-space: nowrap;*/
        /*    overflow: hidden;*/
        /*    text-overflow: ellipsis;*/
        /*    line-height: 40px;*/
        /*    text-align: center;*/
        /*    cursor: pointer;*/
        /*    color: #000;*/
        /*}*/

        /*.tab-menus > .tab-menu-bg > li {*/
        /*    left: 0;*/
        /*    position: absolute;*/
        /*    -webkit-transition: all .5s;*/
        /*    -moz-transition: all .5s;*/
        /*    -o-transition: all .5s;*/
        /*    transition: all .5s*/
        /*}*/

        /*.tab-menus .tab-title-bg-blue {*/
        /*    background: #009fe9;*/
        /*}*/

        /*.tab-menus .tab-title-bg-white {*/
        /*    background: #fff;*/
        /*}*/

        /*.tab-menus .tab-context {*/
        /*    display: none;*/
        /*}*/

        /*.tab-menus .tab-context.show {*/
        /*    display: block;*/
        /*}*/

        #testTab {
            width: 750px;
            height: 300px;
        }

        #testTab2 {
            width: 750px;
            height: 450px;
        }

        /*.tab-menus.horizontal > div.tab-menu > ul {*/
        /*    height: 42px;*/
        /*    width: 100%;*/
        /*}*/

        /*.tab-menus.vertical > div.tab-menu > ul {*/
        /*    height: auto;*/
        /*    width: 150px;*/
        /*}*/

        /*!**!*/
        /*.tab-menus {*/
        /*    margin: auto;*/
        /*    position: absolute;*/
        /*    width: inherit;*/
        /*    height: inherit;*/
        /*    border: 1px solid #009fe9;*/
        /*}*/

        /*.tab-menus > div.tab-content {*/
        /*    height: 100%;*/
        /*}*/

        /*.tab-menus > div.tab-menu > ul {*/
        /*    float: left;*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    min-width: 150px;*/
        /*    overflow: hidden;*/
        /*}*/

        /*.tab-menus > div.tab-menu > ul.tab-menu-bg {*/
        /*    z-index: -1;*/
        /*    background-color: #009fe977;*/
        /*    position: relative;*/
        /*}*/

        /*.tab-menus > div.tab-menu > ul.tab-menu-ul {*/
        /*    position: absolute;*/
        /*}*/

        /*.tab-menus > div.tab-menu > ul > li {*/
        /*    list-style: none;*/
        /*    width: 140px;*/
        /*    padding: 0 5px;*/
        /*    float: left;*/
        /*    height: auto;*/
        /*}*/

        /*.tab-menus > div.tab-menu > ul.tab-menu-ul > li {*/
        /*    min-width: 100px;*/
        /*    white-space: nowrap;*/
        /*    overflow: hidden;*/
        /*    text-overflow: ellipsis;*/
        /*    line-height: 42px;*/
        /*    text-align: center;*/
        /*    cursor: pointer;*/
        /*    color: #000;*/
        /*}*/

        /*.tab-menus > div.tab-menu > ul.tab-menu-bg > li {*/
        /*    opacity: 1;*/
        /*    left: 0;*/
        /*    height: 42px;*/
        /*    position: absolute;*/
        /*    -webkit-transition: all .5s;*/
        /*    -moz-transition: all .5s;*/
        /*    -o-transition: all .5s;*/
        /*    transition: all .5s*/
        /*}*/

        /*div.tab-menu > ul.tab-menu-bg > li.tab-title-bg-blue {*/
        /*    background: #009fe9;*/
        /*}*/

        /*div.tab-menu > ul.tab-menu-bg > li.tab-title-bg-white {*/
        /*    background: #fff;*/
        /*}*/

        /*div.tab-menu > ul.tab-menu-bg > li.over {*/
        /*    opacity: 0;*/
        /*}*/

        /*div.tab-menu > ul.tab-menu-ul > li.over {*/
        /*    color: #fff;*/
        /*}*/

        /*.tab-menus > div.tab-content > div {*/
        /*    display: none;*/
        /*}*/

        /*.tab-menus > div.tab-content > div.show {*/
        /*    display: block;*/
        /*}*/

    </style>
</head>
<body>
<div>tab组件测试</div>
<div id="testTab">
    <div class="tab-menus horizontal">
        <div class="tab-menu">
            <ul class="tab-menu-bg">
                <li class="tab-title-bg-blue"></li>
                <li class="tab-title-bg-white"></li>
            </ul>
            <ul class="tab-menu-ul">
                <li><span>tab1</span></li>
                <li title="radio"><span>radio</span></li>
                <li title="checkbox"><span>checkbox</span></li>
                <li><span>tab4</span></li>
                <li><span>tab5</span></li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="tab-context show">
                <div>
                    <img src="../../assets/img/link/home.ico"/>
                </div>
                tab1
            </div>
            <div class="tab-context">
                <a href="../../static/components/radio.html">radio</a>
            </div>
            <div class="tab-context">
                <a href="../../static/components/checkbox.html">checkbox</a>
            </div>
            <div class="tab-context">
                tab4
            </div>
            <div class="tab-context">
                tab5
            </div>
        </div>
    </div>
</div>

<div id="testTab2">
    <div class="tab-menus vertical">
        <div class="tab-menu">
            <ul class="tab-menu-bg" style="height: 450px">
                <li class="tab-title-bg-blue"></li>
                <li class="tab-title-bg-white"></li>
            </ul>
            <ul class="tab-menu-ul">
                <li><span>tab1</span></li>
                <li title="radio"><span>radio</span></li>
                <li title="checkbox"><span>checkbox</span></li>
                <li><span>tab4</span></li>
                <li><span>tab5</span></li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="tab-context show">
                <div>
                    <img src="../../assets/img/link/home.ico"/>
                </div>
                tab1
            </div>
            <div class="tab-context">
                <a href="../../static/components/radio.html">radio</a>
            </div>
            <div class="tab-context">
                <a href="../../static/components/checkbox.html">checkbox</a>
            </div>
            <div class="tab-context">
                tab4
            </div>
            <div class="tab-context">
                tab5
            </div>
        </div>
    </div>
</div>

<script src="../../assets/common/require.js"></script>
<script src="../../assets/common/requireMain.js"></script>
<script src="../../js/test/test.js"></script>
</body>
</html>